<template>
  <!-- 终端列表 -->
  <div id="Terminal">
    <el-row :gutter="40" class="TerminalBox" style="align-items: flex-end;">
      <el-col :span="5">
        <div :class="`${activeClass('wxList')} box`" @click="toDetails('微信公众号', 'wxList')">
          <i class="image image_wx" />
          <p>微信公众号</p>
        </div>
      </el-col>
      <el-col :span="5">
        <div :class="`${activeClass('ydList')} box`" @click="toDetails('移动平台服务号', 'ydList')">
          <i class="image image_ydpt" />
          <p>移动平台服务号</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="TerminalBox">
      <el-col :span="5">
        <div :class="`${activeClass('otherList')} box`" @click="toDetails('统一门户', 'otherList')">
          <i class="image image_tymh" />
          <p>统一门户</p>
        </div>
      </el-col>
      <el-col :span="5">
        <div :class="`${activeClass('hardwareList')} box`" @click="toDetails('显示终端', 'hardwareList')">
          <i class="image image_xszd" />
          <p>显示终端</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import store from '../../store'
export default {
  name: 'Terminal',
  methods: {
    async toDetails(val, path) {
      let roles = store.getters.roles
      if (roles.includes('terminal')) {
        if (roles.includes(path)) {
          const data = JSON.stringify({ name: val, key: path })
          await sessionStorage.setItem('Terminal', data)
          this.$router.push(`/TerminalPreview/terminal/${path}`)
        }
      } else {
        const data = JSON.stringify({ name: val, key: path })
        await sessionStorage.setItem('Terminal', data)
        this.$router.push(`/TerminalPreview/terminal/${path}`)
      }
    },
    activeClass(val) {
      let roles = store.getters.roles
      if (roles.includes('terminal')&&!roles.includes(val)) {
        return 'inaccessible'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$url: '../../assets/';
#Terminal {
  width: 100%;
  height:100%;
  .TerminalBox {
    width: 100%;
    height: 40%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin: 0 !important;
    padding: 0.2rem;
    box-sizing: border-box;
    position: relative;
    .box {
      height: 2.5rem;
      text-align: center;
      background: #fff;
      overflow: hidden;
      border-radius: 0.05rem;
      color: #5470ED;
      font-size: 0.24rem;
      font-weight: bold;
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
      .image {
        width: 1.62rem;
        height: 1.62rem;
        display: block;
        margin: 0.2rem auto 0;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        background: #F5F8FD;
      }
      .image::before{
        content: "";
        width: 1.62rem;
        height: 1.62rem;
        position: absolute;
        left: 0;
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center;
      }
      .image_wx::before {
        background-image: url($url + 'wx.png');
      }
      .image_ydpt::before {
        background-image: url($url + 'ydpt.png');
      }
      .image_tymh::before {
        background-image: url($url + 'tymh.png');
      }
      .image_xszd::before {
        background-image: url($url + 'xszd.png');
      }
    }
    .box:hover {
      box-shadow: #aaa 0px 0px 10px;
      transform: scale(1.05);
    }
    .inaccessible {
      cursor: not-allowed;
      position: relative;
    }
    .inaccessible::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(248, 248, 248, 0.5);
    }
    .inaccessible:hover {
      box-shadow: none;
      transform: none;
    }
  }
}
</style>
